<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>帖子详情</title>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/index.js"></script>    
		<script src="../../js/mui.view.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" charset="utf-8">
		var note_id ;
		//加载子页面
		mui.plusReady(function(){
            // 隐藏滚动条
            plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
            /**
             * 获取上个页面的值参数
             */
				var self = plus.webview.currentWebview();
				var id = self.type;
				var title = self.title;


			//帖子详情
			mui.ajax({ //ajax请求
					url: getServerIp + 'AppNote/noteDitail',
					type: 'GET',
					data: {    
						id:id
					}, //传参
					success: function(data, textStatus, jqXHR) {
						//帖子详情
						document.getElementById('noteDitail').innerHTML = "";
						var noteDitail ="";
						var list =  data.noteList;
						note_id = list.id;
	    					//新增id属性
								noteDitail = '<p style="color: #1197A6;font-size: 16px;">'+list.title+'</p>';
								if (list.top == '1') {
								    noteDitail += '<span style="width: 20px;height: 20px;background-color: #C8902A;position: absolute;">顶</span>';
								}
							
							noteDitail += '<p style="float: right;">'+
							'观看&nbsp;<span style="color: #83E5AB;">'+list.number+'</span>&nbsp;&nbsp;&nbsp;&nbsp;'+
							'回复&nbsp;<span style="color: #83E5AB;">'+list.note_count+'</span>'+
							'</p><div style="border-bottom: 1px solid #eee;padding-top: 40px;margin-bottom: 15px;"></div>'+
							'<div style="padding-bottom: 15px;">'+
							'<img src="'+getServerIp+'/Public/images/login/'+list.image_user+'" style="float: left;padding-right: 15px;" />'+
							'<p><span style="color: #000000;font-size: 16px;">'+list.username+'</span><span style="float: right;">'+list.days+'天前</span></p>'+
							'<span style="border-radius: 10px;background: #00CA75;padding: 2px 5px;font-size: 12px;">楼主</span>'+
							'</div>'+
							'<p tyle="color: #000;font-size: 16px;">'+list.content+'</p>';
	                        document.getElementById("noteDitail").innerHTML = noteDitail;
							
							//帖子一级评论
							var oneList =  data.noteOneList;
							var twoList =  data.noteTwoList;
							document.getElementById('noteOneList').innerHTML = "";
							var table2 = document.body.querySelector('#noteOneList');
							if(oneList==null || oneList ==""){
								var li2 = document.createElement('li');
								li2.innerHTML = "暂无评论"
								table2.appendChild(li2);
							}else{
								for(var i = 0;i<oneList.length;i++){
								   var obj2 = oneList[i];
								   var li2 = document.createElement('li');
									li2.id = obj2.id;
									li2.className = 'mui-table-view mui-grid-view';
									li2.innerHTML = '<div class="mui-content course_second" style="background: white;padding: 11px 15px;margin-top: 11px;">'+
									'<div style="padding-bottom: 15px;">'+
									'<img src="'+getServerIp+'/Public/images/login/'+obj2.image_user+'" style="float: left;padding-right: 15px;" />'+
									'<p><span style="color: #000000;font-size: 16px;">'+obj2.username+'</span><span style="float: right;">'+(i+1)+'楼&nbsp;&nbsp;'+obj2.days+'天前</span></p>'+
									'</div><p style="color: #000;font-size: 16px;">'+obj2.message+'</p>'+
									'<p style="height: 10px;"><span class="mui-icon mui-icon-chatbubble-filled chat_replay" style="float: right;"></span></p>'+
									'<br />'+
									'<div id="noteTwoList'+i+'"></div>'+
									'</div>';
			                        table2.appendChild(li2);
			                        
			                        
									//多级评论
									document.getElementById('noteTwoList'+i).innerHTML = "";
									var table3 = document.body.querySelector('#noteTwoList'+i);
									if(twoList==null || twoList ==""){
										//var li3 = document.createElement('li');
										//table3.appendChild(li3);
									}else{
										for(var j = 0;j<twoList.length;j++){
										   var obj3 = twoList[j];
										   var li3 = document.createElement('li');
											//li2.id = obj3.note_id;
											if(obj3.note_one_id == obj2.id){
												li3.className = 'mui-table-view mui-grid-view';
												li3.innerHTML = '<div class="mui-content course_second" style="background: #efeff4;padding: 11px 15px;margin-top: 11px;">'+
												'<div style="padding-bottom: 15px;border:0;">'+
												'<p><span style="color: #000000;font-size: 16px;">'+obj3.name+'>回复>'+obj3.twoname+'</span><span style="float: right;">'+obj3.days+'天前</span></p>'+
												'</div><p style="color: #000;font-size: 16px;">'+obj3.words+'</p>'+
									            '<p style="height: 10px"><span class="mui-icon mui-icon-chatbubble-filled chat_replay" style="float: right;"></span></p>'+
												'</div>';
					                        table3.appendChild(li3);
											}
										}
									}
									
								}
										//回复其他
                                        $(".chat_replay").click(function(){
//                                      	alert("ssssss")
											//alert($(this).parents().find('li').attr('id'));
                                        	var display =$("#replay2").css('display');
                                        	var note_one_id= $(this).parents().find('li').attr('id');
                                        	if (display == 'none') {
                                        	    $("#replay2").show();
                                        	} else{
                                        	    $("#replay2").hide();
                                        	}
                                        });
								    
							}
	                        
					}
				})


            //回复楼主
//          $("#replay").click(function(){
//      	    $("#pic_r").show();
//          })
            document.getElementById('replay').addEventListener('tap', function() {
            	
                //$("#pic_r").show();
            }); 

        });
        
        function replay(){ 
        	var self = plus.webview.currentWebview();
			var title = self.title;
        	var user_id = plus.storage.getItem('user_id');  
        	var message = $('#replay_message').val();
        	if(message == ""){
        		alert("回复内容不能为空")
        		return ;
        	}
        	mui.ajax({ //ajax请求
					url: getServerIp + 'AppNote/noteOneAdd',
					type: 'POST',
					data: {    
						user_id:user_id,note_id:note_id,message:message
					}, //传参
					success: function(data, textStatus, jqXHR) {
						alert("回复成功");
						//打开帖子详情页
			               	mui.openWindow({
			                   	url: 'communityDetail.html', 
			                   	id:'communityDetail',
			                   	extras: {
									type:note_id,title:title
								}
					    });
					}
					});
        	
        }
        function replay2(){
        	var self = plus.webview.currentWebview();
			var title = self.title;
        	var user_id = plus.storage.getItem('user_id');  
        	var words = $('#replay2_message').val();
        	var note_one_id = 11;
        	if(words == ""){
        		alert("回复内容不能为空")
        		return ;
        	}
        	mui.ajax({ //ajax请求
					url: getServerIp + 'AppNote/noteTwoAdd',
					type: 'POST',
					data: {    
						user_id:user_id,note_id:note_id,words:words,note_one_id:note_one_id
					}, //传参
					success: function(data, textStatus, jqXHR) {
						alert("回复成功");
						//打开帖子详情页
			               	mui.openWindow({
			                   	url: 'communityDetail.html', 
			                   	id:'communityDetail',
			                   	extras: {
									type:note_id,title:title
								}
					    });
					}
					});
        }
              // 拍照
function getImage() {
	var cmr = plus.camera.getCamera();
	cmr.captureImage( function ( p ) {
		plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
			document.getElementById("headImgDiv").innerHTML="<img id='loge_userImage' class='mui-media-object mui-pull-left' style='width: 20vw;height: 20vw;margin-left: 2vw;' src='"+entry.toLocalURL()+"'>";
	        $("#picture").hide();
	        $(".mui-backdrop").hide();
	        
	
	//	createItem( entry );
		}, function ( e ) {
//		alert( "读取拍照文件错误："+e.message );
		} );
	}, function ( e ) {
//	alert( "失败："+e.message );
	});
}

function galleryImg() {
	// 从相册中选择图片

    plus.gallery.pick( function(path){
    	document.getElementById("headImgDiv").innerHTML="<img id='loge_userImage' class='mui-media-object mui-pull-left' style='width: 20vw;height: 20vw;margin-left: 2vw;' src='"+path+"'>";
	    $("#picture").hide();
	    $(".mui-backdrop").hide();
//  	outLine(path);
        //showImg( path );
        //createItem(path);
    }, function ( e ) {
//  	outSet( "取消选择图片" );
        alert( "取消选择图片" );
    }, {filter:"image"} );
}
 
		</script>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4; 
			}
			.mui-bar-nav~.mui-content {
				padding: 0;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.mui-title input {
				width: 75%;
				height: 28px;
                border-radius: 5px;
                background: #CAFFE0;
                border: 1px solid #DDDDDD;
                font-size: 14px;
                color: #aaa;
                padding-left: 10px;
                padding-right:20px; 
                margin-left: 40px;
                background:url("images/fdj.png") no-repeat scroll right center transparent; 
			}
			#replay {
				
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav" style="float: left;height: 40px;line-height: 40px;"></span>
				<img src="../../images/logo.png"  style=" height: 40px;"/>
			</button>
			<h1 class="mui-title">帖子详情</h1>
			<a href="#shareMenu" class="mui-icon mui-icon-upload mui-pull-right"></a>
		</header> 
		<div class="mui-content course_second" style="background: white;padding: 56px 15px 11px;" id="noteDitail">
			<!--<p style="color: #1197A6;font-size: 16px;">别样六一节，童年不一样，让爱传出去，大爱满人间！</p>
			<span style="width: 20px;height: 20px;background-color: #C8902A;position: absolute;">顶</span>
			<p style="float: right;">
				观看&nbsp;<span style="color: #83E5AB;">20</span>&nbsp;&nbsp;&nbsp;&nbsp;
				回复&nbsp;<span style="color: #83E5AB;">200</span>
			</p>
			<div style="border-bottom: 1px solid #eee;padding-top: 40px;margin-bottom: 15px;"></div>
			<div style="padding-bottom: 15px;">
				<img src="../../images/60x60.gif" style="float: left;padding-right: 15px;" />
				<p><span style="color: #000000;font-size: 16px;">Rainy</span><span style="float: right;">14小时前</span></p>
				<span style="border-radius: 10px;background: #00CA75;padding: 2px 5px;font-size: 12px;">楼主</span>
			</div>
			<p style="color: #000;font-size: 16px;">别样六一节，童年不一样，让爱传出去，大爱满人间！别样六一节，童年不一样，让爱传出去，大爱满人间！</p>
			<img src="../../images/ldw01.jpg" style="width: 100%;" />-->
        </div>
        
        <!--
        	描述：评论
        -->
		<div style="padding: 11px 0px;margin-top: 11px;margin-bottom: 40px;" id="noteOneList"> 
		<!--<div class="mui-content course_second" style="background: white;padding: 11px 15px;margin-top: 11px;">
			<div style="padding-bottom: 15px;">
				<img src="../../images/60x60.gif" style="float: left;padding-right: 15px;" />
				<p><span style="color: #000000;font-size: 16px;">Rainy</span><span style="float: right;">1楼&nbsp;&nbsp;10小时前</span></p>
			</div>
			<p style="color: #000;font-size: 16px;">别样六一节，童年不一样，让爱传出去，大爱满人间！别样六一节，童年不一样，让爱传出去，大爱满人间！</p>
			<p style="height: 10px"><span class="mui-icon mui-icon-chatbubble-filled" style="float: right;"></span></p>
        </div>
		<div class="mui-content course_second" style="background: white;padding: 11px 15px;margin-top: 11px;">
			<div style="padding-bottom: 15px;">
				<img src="../../images/60x60.gif" style="float: left;padding-right: 15px;" />
				<p><span style="color: #000000;font-size: 16px;">Rainy</span><span style="float: right;">2楼&nbsp;&nbsp;10小时前</span></p>
			</div>
			<p style="color: #000;font-size: 16px;">别样六一节，童年不一样，让爱传出去，大爱满人间！别样六一节，童年不一样，让爱传出去，大爱满人间！</p>
			<p style="height: 10px"><span class="mui-icon mui-icon-chatbubble-filled" style="float: right;"></span></p>
        </div>
		<div class="mui-content course_second" style="background: white;padding: 11px 15px;margin-top: 11px;">
			<div style="padding-bottom: 15px;">
				<img src="../../images/60x60.gif" style="float: left;padding-right: 15px;" />
				<p><span style="color: #000000;font-size: 16px;">Rainy</span><span style="float: right;">3楼&nbsp;&nbsp;10小时前</span></p>
			</div>
			<p style="color: #000;font-size: 16px;">别样六一节，童年不一样，让爱传出去，大爱满人间！别样六一节，童年不一样，让爱传出去，大爱满人间！</p>
			<img src="../../images/ldw03.jpg" style="width: 100%;" />
			<p style="height: 10px"><span class="mui-icon mui-icon-chatbubble-filled" style="float: right;"></span></p>
        </div>
		<div class="mui-content course_second" style="background: white;padding: 11px 15px;margin-top: 11px;margin-bottom: 50px;">
			<div style="padding-bottom: 15px;">
				<img src="../../images/60x60.gif" style="float: left;padding-right: 15px;" />
				<p><span style="color: #000000;font-size: 16px;">Rainy</span><span style="float: right;">4楼&nbsp;&nbsp;10小时前</span></p>
			</div>
			<p style="color: #000;font-size: 16px;">别样六一节，童年不一样，让爱传出去，大爱满人间！别样六一节，童年不一样，让爱传出去，大爱满人间！</p>
			<div style="background:#efeff4;padding: 10px;">
				<p>回复&nbsp;&nbsp;&nbsp;&nbsp;3楼</p>
				<p style="color: #000;font-size: 16px;">这里是该条评论所回复的楼层内容</p>
			</div>
			<p style="height: 10px"><span class="mui-icon mui-icon-chatbubble-filled" style="float: right;"></span></p>
        </div>-->
        </div>
        <!--
        	描述：回复楼主
        -->
		<nav class="mui-bar mui-bar-tab" id="replay" style="background: #E4E9EA;line-height: 45px;">
			<input type="text" placeholder="回复楼主" id="replay_message" style="width: 80%;padding: 0;margin: 0;padding-left: 5px;margin-left: 5px;" />
			<a style="float: right;width: 18%;text-align: center;margin: 0;" onclick="replay();">回复</a>
			<div id="headImgDiv"></div>
			<a href="#picture"><img id="pic_r" style="width: 18vw;margin-left: 2vw;display: none;" src="../../images/addimg.png"/></a>
		</nav>
		<nav class="mui-bar mui-bar-tab" id="replay2" style="background: #E4E9EA;line-height: 45px;display: none;">
			<input type="text" placeholder="回复" id="replay2_message" style="width: 80%;padding: 0;margin: 0;padding-left: 5px;margin-left: 5px;" />
			<a style="float: right;width: 18%;text-align: center;margin: 0;" onclick="replay2();">回复</a>
			<div id="headImgDiv"></div>
			<a href="#picture"><img id="pic_r" style="width: 18vw;margin-left: 2vw;" src="../../images/addimg.png"/></a>
		</nav>
		
		
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a onclick="getImage();">拍照上传</a>
				</li>
				<li class="mui-table-view-cell">
					<a onclick="galleryImg()">选取现有的</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
		
		<img id="pic" src="../img/add.png"style="display: none;"></img>
		<div id="output"style="display: none;">
		    Share模块管理客户端的社交分享功能，提供调用终端社交软件的分享能力。通过plus.share可获取社交分享管理对象。
	    </div>
	    <textarea id="sharecontent" rows="3"style="display: none;">搜班APP，找培訓學校的好神器http://www.51souban.com</textarea>
	    <!--<div id="sharecontent">ffff</div>-->
	    <div id="popover"></div>
		<div id="shareMenu" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				
				<li class="mui-table-view-cell" style="text-align: center;">
					<p>赶快分享给更多的好友吧！</p>
				</li>
				<li id="qq" onclick="shareAction('qq')" class="mui-table-view-cell" style="float: left;">
					<img src="../../images/qq.png" />
					<br />
					<span style="color: #000000;">QQ空间</span>
				</li>
				<li id="weixin" onclick="shareAction('weixin','WXSceneTimeline');" class="mui-table-view-cell" style="float: left;">
					<img src="../../images/weChat.png" />
					<br />
					<span style="color: #000000;">微信圈</span>
				</li>
				<li id="sinaweibo" onclick="shareAction('sinaweibo')" class="mui-table-view-cell">
					<img src="../../images/sina.png" />
					<br />
					<span style="color: #000000;">新浪微博</span>
				</li>
				<li class="mui-table-view-cell">
					<a href="#shareMenu"><b>取消</b></a>
				</li>
			</ul>
		</div>
		
<!--   
	分享所用Javascript
-->
<script type="text/javascript">
	var shares=null;
	// H5 plus事件处理
	function plusReady(){
		plus.webview.currentWebview().addEventListener("hide",function(){
			shareHide();
		},false);
		updateSerivces();
	}
	if(window.plus){
		plusReady();
	}else{
		setTimeout(function(){
			plusReady();
			//document.addEventListener("plusready",plusReady,false);
		},500);
	}
</script>

	</body>
</html>